<template>
  <div>
    <a-form layout="inline" class="default-search-form gb-flex-form" :form="form" @submit="handleSearch" :label-col="{ span: 7}">
      <a-row :gutter="8">
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" :label="$t('dict_code')">
            <a-input v-decorator="['dictCode']" :placeholder="$t('dict_code')"/>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" :label="$t('dict_name')">
            <a-input v-decorator="['dictName']" :placeholder="$t('dict_name')"/>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" :label="$t('item_code')">
            <a-input v-decorator="['itemCode']" :placeholder="$t('item_code')"/>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" :label="$t('item_name')">
            <a-input v-decorator="['itemName']" :placeholder="$t('item_name')"/>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" :label="$t('parent_dict_code')">
            <a-input v-decorator="['parentDictCode']" :placeholder="$t('parent_dict_code')"/>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" :label="$t('parent_item_code')">
            <a-input v-decorator="['parentItemCode']" :placeholder="$t('parent_item_code')"/>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" :label="$t('is_active')">
            <DictSelector dictCode="TRUE_FALSE_IND" v-decorator="['isActive']" :placeholder="$t('is_active')"/>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item class="gb-search-button">
            <a-button class="item" v-if="funcs['DictSearch']" type="primary" html-type="submit">
              {{ $t(funcs['DictSearch']) }}
            </a-button>
            <a-button type="primary" class="item" @click="handleReset">
              {{ $t('reset') }}
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <div class="table-multiple-operations">
      <DictForm v-if="funcs['DictCreate']" class="item" :text="$t(funcs['DictCreate'])" :callback="handleSearch" url="/infra/dict/create" />
      <Delete v-if="funcs['DictDelete']" class="item" :text="$t(funcs['DictDelete'])" :rows="selectedRows" :callback="handleSearch" url="/infra/dict/delete" />
    </div>
    
    <a-table :columns="columns"
      :rowKey="record => record.id"
      :dataSource="data"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      size="small"
      :scroll="{ x: 1870 }"
    >
      <div slot="long_column_ellipsis" slot-scope="text">
        <LongTableColumn>{{ text }}</LongTableColumn>
      </div>

      <div class="table-single-operations" slot="action" slot-scope="text, record">
        <DictForm v-if="funcs['DictCopy']" class="item" :text="$t(funcs['DictCopy'])" displayType="LINK" :row="record" :callback="handleSearch"  url="/infra/dict/copy" />
        <DictForm v-if="funcs['DictUpdate']" class="item" :text="$t(funcs['DictUpdate'])" displayType="LINK" :row="record" :callback="handleSearch"  url="/infra/dict/update" />
        <Delete v-if="funcs['DictDelete']" class="item" :text="$t(funcs['DictDelete'])" displayType="LINK" :rows="[record]" :callback="handleSearch" url="/infra/dict/delete" />
      </div>

    </a-table>
  </div>
</template>
<script>
import axios from 'axios'
import common from '@/global/common.js'

export default {
  data() {
    return {
      form: this.$form.createForm(this, {name: this._uid}),
      data: [],
      loading: true,
      selectedRowKeys: [],
      selectedRows: [],
      pagination: {sortField: 'dict_code', sortOrder: 'ascend', ...common.getPagination()},
    }
  },
  computed: {
    funcs() {
      return common.getVisibleFunc('DictList')
    },
    columns() {
      const columns = [
        { title: this.$t("dict_code"), dataIndex: 'dictCode', sorter: true, defaultSortOrder:'ascend', key: 'dict_code', scopedSlots: { customRender: 'long_column_ellipsis' }, width: 155 },
        { title: this.$t("dict_name"), dataIndex: 'dictName', sorter: true, key: 'dict_name', width: 155, },
        { title: this.$t("item_code"), dataIndex: 'itemCode', sorter: true, key: 'item_code', scopedSlots: { customRender: 'long_column_ellipsis' }, width: 155 },
        { title: this.$t("item_name"), dataIndex: 'itemName', sorter: true, key: 'item_name', scopedSlots: { customRender: 'long_column_ellipsis' }, width: 155 },
        { title: this.$t("item_name_i18n"), dataIndex: 'itemNameI18n', sorter: true, key: 'item_name_i18n',customRender: (text) => { return <LongTableColumn>{text ? JSON.stringify(text) : ''}</LongTableColumn> }, width: 155 },
        { title: this.$t("order_no"), dataIndex: 'orderNo', sorter: true, key: 'order_no', width: 80 },
        { title: this.$t("parent_dict_code"), dataIndex: 'parentDictCode', sorter: true, key: 'parent_dict_code', scopedSlots: { customRender: 'long_column_ellipsis' }, width: 155 },
        { title: this.$t("parent_item_code"), dataIndex: 'parentItemCode', sorter: true, key: 'parent_item_code', scopedSlots: { customRender: 'long_column_ellipsis' }, width: 155 },
        { title: this.$t("is_active"), dataIndex: 'isActiveDesc', sorter: true, key: 'is_active',  width: 100, },
        { title: this.$t("create_by"), dataIndex: 'createByDesc', sorter: true, key: 'create_by', width: 100, }, 
        { title: this.$t("create_time"), dataIndex: 'createTime', sorter: true, key: 'create_time', width: 155, }, 
        { title: this.$t("update_by"), dataIndex: 'updateByDesc', sorter: true, key: 'update_by', width: 100, }, 
        { title: this.$t("update_time"), dataIndex: 'updateTime', sorter: true, key: 'update_time', width: 155, }, 
        { title: this.$t("action"), key: 'action', scopedSlots: { customRender: 'action' }, width: 145, fixed: 'right', }
      ]
      return columns
    }
  },
  mounted() {
    this.fetch();
  },
  methods: {
    handleSearch (e) {
      if(e){
        this.pagination.current = 1;
        e.preventDefault();
      }
      this.fetch()
    },
    handleReset () {
      this.form.resetFields();
      this.handleSearch()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRows = selectedRows
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination.pageSize = pagination.pageSize
      this.pagination.current = pagination.current
      this.pagination.sortField = ''
      this.pagination.sortOrder = ''
      if (sorter.column) {
        this.pagination.sortField = sorter.columnKey
        this.pagination.sortOrder = sorter.order
      }
      this.fetch({
        ...filters,
      });
    },
    fetch (param = {}) {
      this.form.validateFields((err, formValue) => {
        if (err) {
          return;
        }
        this.loading = true
        axios({
          url: '/infra/dict/find',
          method: 'get',
          params: {
            pageSize: this.pagination.pageSize,
            pageNum: this.pagination.current,
            sortField: this.pagination.sortField,
            sortOrder: this.pagination.sortOrder,
            ...param,
            ...formValue
          },
        }).then((res) => {
          this.pagination.total = res.data.total;
          this.data = res.data.rows;
        }).catch(() => {
          
        }).finally(() => {
          this.loading = false;
        })
      });
    }
  },
}
</script>